{#继承base。html#}
{% extends 'common/base.html' %}

{#改变title#}
{% block title %}
    index
{% endblock %}

{#增加主页内容#}
{% block main %}
    <script>

   change= function(k){
          var videoSrc = k.getAttribute('loc');//新的视频播放地址
          console.log(k.getAttribute('loc'));
          document.getElementById("videoid").setAttribute('src',videoSrc);
          document.getElementById("video").load();
        };
    </script>
     <div id="page-wrapper">
		  <div class="header">
                        <h1 class="page-header">
                             信息查看
                        </h1>
						<ol class="breadcrumb">
					  <li><a href="{{ url_for('index') }}">主页</a></li>
					  <li><a href="#">信息查看</a></li>
					  <li class="active">Data</li>
					</ol>

		</div>
            <div id="page-inner">

                 <div class="row">
                 <div class="col-md-4 col-sm-12 col-xs-12">
	<div class="card">
	<div class="card-action" style="height: 420px">
					  <b>录像列表</b>
					</div>
					<div class="card-image">
					  <ul class="collection">


    {% for k in vedios %}
     <li class="collection-item avatar">
      <i class="material-icons circle red">play_arrow</i>
      <span class="title">{{ k.vediobegin }}</span>
      <p>{{ k.vedioend }}<br>
      </p>
      <a class="secondary-content" onclick="change(this)" loc="{{ k.path }}"><i class="material-icons">grade</i></a>
    </li>
    {% endfor %}

  </ul>
					 </div>
					</div>


                 </div>

                 <div class="col-md-8 col-sm-12 col-xs-12">


	               <div class="card">
	             <div class="card-action">
					  <b>录像内容</b>
					</div>
					 <div class="card">
						 <div class="card-image">
                            <div id="vedio_div" class="card-image">
                                <!--vedio-->
                                <video name="video" controls="controls" style="position:relative;width:100%" id="video" >
                                    <!--替换此处-->
                                    <source id="videoid" src="/static/video/2020-02-01.mp4" type="video/mp4">
                                    您的浏览器不支持，请升级您的浏览器
                                </video>

                            </div>
                        </div>

						<div class="card-content">
						  <span class="card-title activator grey-text text-darken-4">Card Title<i class="material-icons right">more_vert</i></span>
						  <p><a href="#">This is a link</a></p>
						</div>
						<div class="card-reveal">
						  <span class="card-title grey-text text-darken-4">Card Title<i class="material-icons right">close</i></span>
						  <p>Here is some more information about this product that is only revealed once clicked on.</p>
						</div>
					  </div>

                 </div>
                    </div>
                 </div>
                <div class="row" style="display: none">
                    <div class="col-md-6 col-sm-12 col-xs-12">
                    <div class="card">
                        <div class="card-action">
                            Bar Chart
                        </div>
                        <div class="card-content">
                            <div id="morris-bar-chart"></div>
                        </div>
                    </div>
                </div>
                      <div class="col-md-6 col-sm-12 col-xs-12">
                    <div class="card">
                        <div class="card-action">
                            Area Chart
                        </div>
                        <div class="card-content">
                            <div id="morris-area-chart"></div>
                        </div>
                    </div>
                </div>
           </div>
                 <!-- /. ROW  -->
                <div class="row">

                               <div class="col-md-12 col-sm-12 col-xs-12">
                    <div class="card">
                        <div class="card-action">
                            本日温度与湿度数据
                        </div>
                        <div class="card-content">
                            <div id="morris-line-chart"></div>
                        </div>
                    </div>
                </div>
                      <div class="col-md-6 col-sm-12 col-xs-12" style="display: none">
                    <div class="card">
                        <div class="card-action">
                            Donut Chart
                        </div>
                        <div class="card-content">
							<div id="morris-donut-chart"></div>
                        </div>
                    </div>
                </div>

           </div>
                 <!-- /. ROW  -->
				 <footer><p>All right reserved. Template by: <a href="https://webthemez.com/admin-template/">WebThemez.com</a></p></footer>
				</div>
             <!-- /. PAGE INNER  -->
            </div>
{% endblock %}